<template>
  <div>
    <el-row>
        <div style="display: flex; align-items: center;" class="margin-bottom">
          <el-upload
            class="avatar-uploader"
            style="display: inline-block"
            :auto-upload="false"
            action="#"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :on-change="onchange"
            :before-upload="beforeAvatarUpload">
            <el-button size="small" type="primary" icon="el-icon-plus avatar-uploader-icon">上传图片</el-button>
          </el-upload>

          <el-button-group class="margin-left">
            <el-button size="small" type="primary" :disabled="!file.size" @click="base64">base64</el-button>
            <el-button size="small" @click="md5" :disabled="!file.size">md5</el-button>
            <el-button size="small" @click="cleanImage" :disabled="!file.size" >删除</el-button>
            <el-button size="small" class="text-forestgreen" icon="el-icon-document-copy" @click="copyText(output,$event)" :disabled="!output">复制</el-button>
          </el-button-group>
        </div>

        <div >
          <p>文件名: {{file.name}}</p>
          <p>文件大小: {{formatSizeHuman(file.size)}}</p>
        </div>

        <div style="display: flex;align-items: flex-start">
          <div style="min-width: 25vw;">
            <el-image v-if="imageUrl" :src="imageUrl" class="avatar" style="max-width: 30vw" :preview-src-list="[imageUrl]" />
          </div>

          <div contenteditable="true" class="data-show">{{output}}</div>
        </div>
    </el-row>
  </div>
</template>

<script>
import CryptoJS from 'crypto-js'
import clip from '@/utils/clipboard'

import {formatSizeHuman} from '@/utils'

import SparkMD5 from "spark-md5";

export default {
  name: 'imageEncrypt',
  data(){
    return {
      imageUrl: '',
      output: null,
      file: {}
    }
  },
  methods: {
    formatSizeHuman,
    copyText(text, event) {
      clip(text, event)
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 10;

      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 10MB!');
      }

      return isLt2M;
    },
    //当上传图片后，调用onchange方法，获取图片本地路径
    onchange(file,fileList){
      this.file = file;
      let reader = new FileReader();
      let _this = this;
      //转base64
      reader.onload = function(e) {
        _this.imageUrl = e.target.result
      }
      reader.readAsDataURL(file.raw);
    },
    cleanImage(){
      this.imageUrl = null;
      this.output = null;
    },
    md5(){
      let reader = new FileReader();
      let _this = this;
      let spark = new SparkMD5.ArrayBuffer();
      reader.onload = function(e){
        spark.append(e.target.result);
        _this.output = spark.end();
      }
      reader.readAsArrayBuffer(this.file.raw)
    },
    base64(){
      this.output = this.imageUrl;
    }
  }
}
</script>

<style scoped>
.upload-demo{
  display: block;
  width: 360px;
}
.data-show{
  width: 50vw;
  line-height: 1.5em;
  font-size: 15px;
  overflow-x: scroll;
  padding: 5px;
  white-space: nowrap;
}
</style>
